<template>
  <dialog ref="dialogRef" class="simple-cost-mode-viewer">
    <form method="dialog" class="dialog-body" @submit.prevent="close">
      <div class="dialog-header">
        <h3>
          <svg class="title-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="12" y1="1" x2="12" y2="23" />
            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
          </svg>
          费用模式
        </h3>
        <button type="button" class="close-x" @click="close" aria-label="关闭">
          <svg class="close-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <line x1="18" y1="6" x2="6" y2="18" />
            <line x1="6" y1="6" x2="18" y2="18" />
          </svg>
        </button>
      </div>
      <div class="section compact">
        <div class="info-grid">
          <div class="info-block">
            <div class="block-head">
              <span class="block-title">模式</span>
              <div class="badge" :class="entry?.costMode">{{ entry?.costMode==='fixed' ? '固定费用' : '计数费用' }}</div>
            </div>
            <p class="mode-desc" v-if="entry?.costMode==='fixed'">按固定金额直接计入成本。</p>
            <p class="mode-desc" v-else>按数量 * 单价 计入成本（此处仅展示单价）。</p>
          </div>
          <div class="info-block value-focus" v-if="entry">
            <div class="value-tags single-line">
              <span class="badge label-badge" :class="entry.costMode">{{ entry?.costMode==='fixed' ? '固定金额' : '单价' }}</span>
            </div>
            <span class="focus-number">{{ entry?.costMode==='fixed' ? toCurrency(entry?.fixedAmount) : toCurrency(entry?.unitPrice) }}</span>
          </div>
        </div>
      </div>
      <div class="dialog-actions footer">
        <button type="button" class="btn primary" @click="close">
          <svg class="btn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
            <polyline points="20,6 9,17 4,12" />
          </svg>
          关闭
        </button>
      </div>
    </form>
  </dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';

interface SimpleViewEntry {
  id: string;
  costMode: 'fixed' | 'count';
  fixedAmount?: number;
  unitPrice?: number;
}

const dialogRef = ref<HTMLDialogElement | null>(null);
const entry = ref<SimpleViewEntry | null>(null);

function open(e: SimpleViewEntry) {
  entry.value = e;
  const el = dialogRef.value;
  if (el) { el.classList.remove('closing'); el.showModal(); }
}
function close() {
  const el = dialogRef.value;
  if (!el) return;
  if (el.classList.contains('closing')) return;
  el.classList.add('closing');
  const done = () => { el.removeEventListener('transitionend', done); el.classList.remove('closing'); el.close(); };
  el.addEventListener('transitionend', done);
  setTimeout(done, 380);
}

function toCurrency(v?: number) {
  if (v == null || isNaN(v)) return '-';
  // 固定为两位小数，并添加千分位
  return Number(v).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

defineExpose({ open, close });
</script>

<style scoped>
.simple-cost-mode-viewer::backdrop { background: rgba(15,23,42,.5); backdrop-filter: blur(6px); animation: backdropFadeIn .32s ease; }
@keyframes backdropFadeIn { from {opacity:0;} to {opacity:1;} }
.simple-cost-mode-viewer { border:1px solid #e2e8f0; border-radius:16px; padding:0; width:480px; max-width:92vw; box-shadow:0 14px 32px -10px rgba(15,23,42,.28),0 4px 14px -4px rgba(15,23,42,.18); overflow:hidden; animation: dialogFadeSlide .32s cubic-bezier(.4,0,.2,1); background:#fff; transition: opacity .28s cubic-bezier(.4,0,.2,1), transform .32s cubic-bezier(.4,0,.2,1); will-change: opacity, transform; }
/* 关闭时采用与其它弹窗统一的向上轻移 + 淡出，不再出现“先模糊再关闭”分段感 */
.simple-cost-mode-viewer.closing { opacity:0; transform:translateY(-12px); pointer-events:none; }
/* Backdrop 在关闭阶段渐隐与去模糊，避免突兀闪烁 */
.simple-cost-mode-viewer.closing::backdrop { animation: backdropFadeOutSimple .32s ease forwards; }
@keyframes backdropFadeOutSimple { to { background:rgba(15,23,42,0); backdrop-filter:blur(0); } }
@keyframes dialogFadeSlide { from {opacity:0; transform:translateY(14px);} to {opacity:1; transform:translateY(0);} }
.dialog-body { display:flex; flex-direction:column; gap:1.25rem; padding:1.35rem 1.5rem 1.5rem; background:linear-gradient(145deg,#ffffff,#f8fafc 70%); }
.dialog-header { position:relative; display:flex; align-items:center; gap:.55rem; min-height:46px; padding:.25rem 0; }
.dialog-header h3 { margin:0; font-size:16px; font-weight:600; display:flex; align-items:center; gap:.5rem; padding-right:2.5rem; }
.title-icon { width:18px; height:18px; stroke:#2563eb; stroke-width:1.8; }
.close-x { position:absolute; top:4px; right:4px; width:34px; height:34px; padding:0; background:transparent; border:none; cursor:pointer; border-radius:10px; color:#6b7280; transition:all .2s; display:flex; align-items:center; justify-content:center; }
.close-x:hover { background:linear-gradient(135deg,#fee2e2,#fecaca); color:#dc2626; transform:rotate(90deg); }
.close-x:active { transform:rotate(90deg) scale(.9); }
.close-icon { width:18px; height:18px; }
.section { display:flex; flex-direction:column; gap:1rem; }
.section.compact { padding:.25rem 0 0; }
.section-title { font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#4b5563; position:relative; padding-left:12px; }
.section-title:before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:4px; height:75%; background:linear-gradient(135deg,#3b82f6,#8b5cf6); border-radius:2px; }
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.1rem; align-items:stretch; }
.info-block { position:relative; display:flex; flex-direction:column; gap:.6rem; border:2px solid #e5e7eb; background:linear-gradient(135deg,#ffffff,#f8fafc); border-radius:14px; padding:1rem 1.1rem 1.15rem; box-shadow:0 4px 14px -4px rgba(15,23,42,.12); transition:all .35s cubic-bezier(.4,0,.2,1); }
.info-block:hover { transform:translateY(-4px); box-shadow:0 10px 28px -6px rgba(59,130,246,.35); border-color:#3b82f6; }
.block-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.block-title { font-size:12px; font-weight:700; letter-spacing:.05em; color:#4b5563; text-transform:uppercase; }
.mode-desc { margin:0; font-size:12px; line-height:1.5; color:#64748b; }
.value-focus { background:linear-gradient(135deg,#ffffff,#f8fafc); border-color:#e5e7eb; color:#0f172a; box-shadow:0 4px 14px -4px rgba(15,23,42,.12); }
.value-tags { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.value-tags .badge { box-shadow:0 2px 4px rgba(0,0,0,.08); }
.badge.label-badge { background:linear-gradient(135deg,#dbeafe,#bfdbfe); color:#1e3a8a; font-weight:600; }
.value-focus { display:flex; flex-direction:column; justify-content:flex-start; }
/* 让标签占位与左侧 block-head 高度相近，便于下面数字与左侧描述行对齐 */
.value-focus .value-tags.single-line { min-height:1.1em; line-height:1.1; display:flex; align-items:center; }
.value-focus .value-tags.single-line .label-badge { background:none; padding:0; box-shadow:none; border:none; font-size:12px; font-weight:700; letter-spacing:.05em; color:#4b5563; text-transform:uppercase; }
.value-focus .value-tags.single-line .label-badge.fixed { background:linear-gradient(135deg,#dbeafe,#bfdbfe); padding:.35rem .75rem; border-radius:18px; color:#1e40af; }
.value-focus .value-tags.single-line .label-badge.count { background:linear-gradient(135deg,#fef3c7,#fde68a); padding:.35rem .75rem; border-radius:18px; color:#92400e; }
.focus-number { display:block; width:100%; text-align:center; font-size:26px; font-weight:700; letter-spacing:-.015em; margin-top:.6rem; line-height:1.08; font-variant-numeric:tabular-nums; color:#111827; word-break:break-all; }
.badge { padding:.4rem .9rem; border-radius:24px; font-size:11px; font-weight:700; letter-spacing:.05em; background:#e5e7eb; color:#374151; box-shadow:0 2px 4px rgba(0,0,0,.1); text-transform:uppercase; position:relative; overflow:hidden; }
.badge.fixed { background:linear-gradient(135deg,#dbeafe,#bfdbfe); color:#1e40af; }
.badge.count { background:linear-gradient(135deg,#fef3c7,#fde68a); color:#92400e; }
.dialog-actions.footer { margin-top:1rem; display:flex; justify-content:flex-end; padding-top:1rem; border-top:1px solid #e5e7eb; }
.btn { cursor:pointer; border:1px solid transparent; padding:.75rem 1.5rem; border-radius:12px; font-size:14px; font-weight:600; letter-spacing:.025em; box-shadow:0 2px 4px rgba(0,0,0,.1); transition:all .3s cubic-bezier(.4,0,.2,1); display:inline-flex; align-items:center; gap:.5rem; }
.btn-icon { width:16px; height:16px; }
.btn.primary { background:#2563eb; border-color:#2563eb; color:#fff; }
.btn.primary:hover { background:#1d4ed8; }
</style>
